//引入依赖包
const gulp = require("gulp");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const css = require("gulp-clean-css");
const sass = require("gulp-sass");
const htmlmin = require("gulp-htmlmin");
const connect = require("gulp-connect");
const del = require("del");

const path = {
    //待处理的js文件相关路径
    js:{
        src: 'src/js/**/*.js',//源
        dest: 'dist/js' //目标路径
    },
    //处理字体文件
    font:{
        src:'src/fonts/**/*.*',
        dest:'dist/fonts' //目标路径
    },
    //待处理的css文件路径
    css:{
        src: 'src/css/**/*.css', //源
        dest: 'dist/css' //目标路径
    },

    scss:{
        src:'src/scss/**/*.scss',
        dest:'dist/css'
    },
    //待处理的html文件路径
    html:{
        src: 'src/**/*.html', //源
        dest: 'dist' //目标路径
    },

    //处理libs资源
    lib:{
        src: 'src/libs/**/*.*', //源
        dest: 'dist/libs' //目标路径
    },
    //处理图片
    image:{
        src: 'src/images/**/*.*',
        dest:'dist/images'
    }
}

//定义任务函数，实现js文件处理
const scripts = function(){
    return gulp.src(path.js.src).pipe(babel({//转译
        presets:['env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(path.js.dest)) //放到目标目录中
    .pipe(connect.reload()) //刷新浏览器
}

//定义处理css文件资源任务
const styles = function(){
    return gulp.src(path.css.src)
    .pipe(css()) //压缩css代码
    .pipe(gulp.dest(path.css.src))
    .pipe(gulp.dest(path.css.dest)) //放入目标路径
    .pipe(connect.reload()) //刷新
}

const fonts = function(){
    return gulp.src(path.font.src)
    .pipe(gulp.dest(path.font.dest))
}

//编译 scss=》css
const scsses = function(){
    return gulp.src(path.scss.src)
    .pipe(sass({outputStyle:'compressed'})) //编译scss
    .pipe(gulp.dest(path.scss.dest))
    .pipe(connect.reload())
}

//html文件压缩
const htmls = function(){
    return gulp.src(path.html.src)
    .pipe(htmlmin({collapseWhitespace: true,minifyHS:
    true, minifyCSS:true}))
    .pipe(gulp.dest(path.html.dest))
    .pipe(connect.reload());
}


//复制libs下的目录
const copy = function(){
    return gulp.src(path.lib.src)    //找到源
    .pipe(gulp.dest(path.lib.dest))  //目标路径
    .pipe(connect.reload()) //刷新页面
}

//复制图片目录
const images = function(){
    return gulp.src(path.image.src)
    .pipe(gulp.dest(path.image.dest))
    .pipe(connect.reload())//刷新页面
}
//清理dist目录 防止不必要的文件存在于dist目录中
const clean = function(){
    return del(['dist'])
}

//监视任务
const watch = function(){
    gulp.watch(path.html.src, htmls)
    gulp.watch(path.css.src, styles)
    gulp.watch(path.js.src, scripts)
    gulp.watch(path.scss.src, scsses)
    gulp.watch(path.image.src, images)
    gulp.watch(path.font.src, fonts)
}

//启动webserve

const server = function(){
    connect.server({
        root: 'dist', //其中服务器时，指定webserver的根目录
        port: 8888, //端口
        livereload:true, // 启动浏览器自动刷新功能
    })
}

const build = gulp.series(clean,gulp.parallel(scripts,
    styles,scsses,images,htmls,fonts,copy,watch,server))

//导出任务，在命令行中执行'gulp 任务名称' 可执行指定任务
exports.scripts = scripts
exports.styles = styles
exports.scsses = scsses
exports.htmls = htmls
exports.watch = watch
exports.server = server
exports.images = images
exports.fonts = fonts
//导出默认任务，在命令行中直接使用gulp可执行的任务
exports.default = build 

